<template>
  <view class="container const-height">
    <ve-tabs v-if="query.feeCategory == 4" :showBorder="true" :actived="tabIndex" :list="TABS" @change="changeTab"></ve-tabs>

    <scroll-view scroll-y v-if="tabIndex === 0">
      <view class="box">
        <cost-details />
      </view>
    </scroll-view>

    <three-pay-order v-if="tabIndex === 1 && query.feeCategory == 4" :bizType="3" dictCode="carViolationDict" />
  </view>
</template>

<script setup lang="ts">
  import CostDetails from './components/cost-details.vue'
  import ThreePayOrder from '@/pages/common/components/three-pay-order.vue'

  import { TABS } from '@/constant'
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const tabIndex = ref(0)

  const changeTab = (index: number) => {
    tabIndex.value = index
  }

  const query = ref()
  onLoad((options: any) => {
    console.log(options, 'options')
    query.value = options

    if (options.tabIndex) {
      tabIndex.value = +options.tabIndex
    }
  })
</script>

<style lang="less" scoped>
  .const-height {
    height: 100vh;
    min-height: 0;
  }

  .box {
    padding: 24rpx;
    display: flex;
    flex-direction: column;
  }
</style>
